$(function(){
    window.app = {};
    window.app.footer = {};

    // define global method
    window.app.initComponents = function() {
        $('[data-rel="tooltip"]').tooltip();

        // for uiElement/button.html page
        $('#loading-btn').on(ace.click_event, function () {
            var btn = $(this);
            btn.button('loading');
            setTimeout(function () {
                btn.button('reset')
            }, 2000);
        });
        $('#id-button-borders').attr('checked' , 'checked').on('click', function(){
            $('#default-buttons .btn').toggleClass('no-border');
        });
        // end for uiElement/button.html page

        // for uiElement/typography.html page
        window.prettyPrint && prettyPrint();
        $('#id-check-horizontal').removeAttr('checked').on('click', function(){
            $('#dt-list-1').toggleClass('dl-horizontal').prev().html(this.checked ? '&lt;dl class="dl-horizontal"&gt;' : '&lt;dl&gt;');
        });
        // end for uiElement/typography.html page
    };

    window.app.loadContent = function(url, afterLoadFun) {
        if(url) {
            if(url.indexOf('http://') > -1) {
                $('.page-content').empty();
                $("<iframe width='" + ($("body").width() - 250) + "' height='" + ($(window).height() - 170) + "' id='myFrame'></iframe>").prependTo('.page-content');
                $("#myFrame").attr("src", url);
            } else {
                $('.page-content').load(config.baseUrl + url, function() {
                    if(afterLoadFun) {
                        afterLoadFun();
                    }

                    var divMainContent = $('.main-content-inner')[0];
                    ko.cleanNode(divMainContent);
                    ko.applyBindings(window.app, divMainContent);

                    window.app.initComponents();
                });
            }
        }
    };

    // define view model
    app.navUserViewModel = {
        data: {},
        itemClick: function(data) {
            window.app.loadContent(data.href, function() {
                window.app.breadcrumb = [
                    {
                        icon: data.menuIcon,
                        name: data.name
                    }
                ];
            });
        }
    };

    app.sidebarViewModel = {
        data: {},
        itemClick: function(data, parents) {
            window.app.loadContent(data.href, function() {
                window.app.breadcrumb = [];

                if(parents && parents.length) {
                    $.each(parents, function(index) {
                        if(parents[index].name) {
                            var icon = '';
                            if(index == 0) {
                                icon = parents[index].menuIcon || parents[index].btnIcon;
                            }

                            window.app.breadcrumb.unshift({
                                icon: icon,
                                name: parents[index].name
                            });
                        }
                    });
                }

                var icon = '';
                if(!window.app.breadcrumb.length) {
                    icon = data.menuIcon || data.btnIcon;
                }
                window.app.breadcrumb.push({
                    icon: icon,
                    name: data.name
                });
            });
        }
    };

    $('#templateContainer').load(config.baseUrl + '/lib/template/template-knockout-ace.html', function(){
        var urlWithSuccessFunArray = [
            {
                url: config.baseUrl + '/testData/navUser.json',
                successFun: function(data) {
                    window.app.navUserViewModel.data = data;
                    ko.applyBindings(window.app.navUserViewModel, $('#navbar-container')[0]);
                }
            },
            {
                url: config.baseUrl + '/testData/sidebar.json',
                successFun: function(data) {
                    window.app.sidebarViewModel.data = data;
                    ko.applyBindings(window.app.sidebarViewModel, $('#sidebar')[0]);
                }
            }
        ];
        $.getManyUrls(urlWithSuccessFunArray, function() {
            window.app.initComponents();
        });
    });
});